<template>
  <div style="margin-top: 30px">
    <h1>采购订单编辑</h1>
    <div style="margin-left: 100px;margin-right:100px ">
      <el-form ref="form" :model="editForm" label-width="120px" size="small" :rules="rules">
        <el-form-item label="采购订单号">
          <el-input v-model="editForm.orderNo" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="采购供应商" prop="supplierCode">
          <el-input v-model="editForm.supplierCode" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="采购仓库" prop="warehouseCode">
          <el-select v-model="editForm.warehouseCode" placeholder="请选择仓库" style="width: 400px;">
            <el-option label="广州仓" value="10"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采购量" prop="quantity">
          <el-input v-model="editForm.quantity" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="订单金额（元）">
          <el-input v-model="ordersTotal" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="价税合计（元）">
          <el-input v-model="ordersTotalTax" style="width: 400px;"></el-input>
        </el-form-item>
        <el-form-item label="要货日期" prop="demandDate">
          <el-date-picker
            style="width: 400px;"
            v-model="editForm.demandDate"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="editForm.desc" style="width: 400px;"></el-input>
        </el-form-item>
        <h1>物流信息</h1>
        <el-form-item label="物流公司">
          <el-select v-model="editForm.region" style="width: 100px;">
            <el-option label="顺丰" value="顺丰"></el-option>
          </el-select>
          <el-input v-model="editForm.desc" style="width: 300px;" placeholder="请输入快递单号"></el-input>
        </el-form-item>
        <div style="position: relative">
            采购商品明细
            <el-button size="small" style="position: absolute;right: 0" type="primary" @click="addProduct">添加商品</el-button>
          <el-table size="small" :data="productInfo" highlight-current-row
                    v-loading="loading" element-loading-text="拼命加载中" style="width: 100% ; margin-top: 20px" border>
            <el-table-column prop="productName" label="商品名称" width="145">
            </el-table-column>
            <el-table-column prop="productCode" label="商品编码" width="145">
            </el-table-column>
            <el-table-column prop="productImage" label="商品图片" width="145">
            </el-table-column>
            <el-table-column prop="size" label="商品尺码" width="145">
            </el-table-column>
            <el-table-column prop="orderAmount" label="采购量" width="145">
            </el-table-column>
            <el-table-column prop="platformFee" label="单价" width="145">
            </el-table-column>
            <el-table-column prop="finalPrice" label="含税单价" width="145">
            </el-table-column>
            <el-table-column prop="costPrice" label="价税合计" width="145">
            </el-table-column>
          </el-table>
        </div>
        <el-form-item style="display:flex ; justify-content: center ; margin-top: 10px">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-dialog
      title="添加商品"
      :visible.sync="dialogVisible"
      width="50%">
      <el-form>
        <el-form-item label="商品查询">
          <el-input placeholder="请输入商品名" style="width: 300px"></el-input>
          <el-button icon="el-icon-search" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table size="small" :data="ProductAdd" highlight-current-row @selection-change="handleSelectionChange"
                v-loading="loading" element-loading-text="拼命加载中" style="width: 100% ;max-height: 300px; margin-top: 20px" border>
        <el-table-column type="selection" style="width: 55px;"></el-table-column>
        <el-table-column prop="productName" label="商品名称" width="100">
        </el-table-column>
        <el-table-column prop="productImage" label="商品图片" width="100">
        </el-table-column>
        <el-table-column prop="productCode" label="商品货号" width="100">
        </el-table-column>
        <el-table-column prop="size" label="商品尺码" width="100">
        </el-table-column>
        <el-table-column prop="size" label="库存数" width="100">
        </el-table-column>
        <el-table-column prop="productType" label="商品类型" width="100">
        </el-table-column>
      </el-table>
      <div style="position: relative;height: 50px">
        <div style="position: absolute; right: 0; top: 10px">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="productAdd">确认添加</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name:"AddNewOrder",
  data() {
    return {
      dialogVisible:false,
      loading:false,
      handleSelection:[//添加商品选中的商品列表

      ],

      productInfo:[//商品信息表
        {
          finalPrice:0,
          platformFee:0,
          orderAmount:0
        }
      ],
      ProductAdd:[//添加商品表
        {
          productName:"王老吉",
          productType:"良品"
        }
      ],
      title:"添加",
      editForm:{},
      rules: {//输入框验证
        supplierCode: [
          {required: true, message: '请输入供应商', trigger: 'blur'},
        ],
        warehouseCode: [
          {required: true, message: '请选择仓库', trigger: 'blur'},
        ],
        quantity: [
          {required: true, message: '请输入采购量', trigger: 'blur'},
        ],
        demandDate: [
          {required: true, message: '请选择要货日期', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    productAdd(){//商品添加按钮
      for (let i = 0; i < this.handleSelection.length; i++) {
        this.productInfo.push(this.handleSelection[i])
      }
      this.dialogVisible=false
    },
    handleSelectionChange(val){//添加商品选择框
        this.handleSelection=val
    },
    addProduct(){//添加商品
      this.dialogVisible=true
    },
    onSubmit() {
      console.log('submit!');
    },
    cancel() {
      this.$router.push("purchaseOrder")
    },
  },
  created() {
    this.editForm=this.$route.query.editForm
    this.title=this.$route.query.title
  },
  computed:{
    ordersTotal(){
      let s = 0;
      for (let i = 0; i < this.productInfo.length; i++) {
        s = this.productInfo[i].orderAmount * this.productInfo[i].platformFee + s
      }
      return s
    },
    ordersTotalTax(){
      let s = 0;
      for (let i = 0; i < this.productInfo.length; i++) {
        s = this.productInfo[i].orderAmount * this.productInfo[i].finalPrice + s
      }
      return s
    }
  }
}
</script>
